import * as THREE from 'three'

function createCourse04 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true
  dom.appendChild(render.domElement)

  // show axes in the screen
  const axes = new THREE.AxesHelper(50)
  // axes.setColors(0xff00ff,0x0000ff,0x00ff00);
  scene.add(axes)

  const geometry = new THREE.BoxGeometry(8, 8, 8)
  const material = new THREE.MeshLambertMaterial({ color: 0xff2288 })
  const cube = new THREE.Mesh(geometry, material)
  cube.castShadow = true

  cube.position.x = 10
  cube.position.y = 8
  cube.position.z = -10

  scene.add(cube)

  const planeGeometry = new THREE.PlaneGeometry(100, 100)
  const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xAAAAAA })
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)

  plane.rotation.x = -0.5 * Math.PI
  plane.position.set(15, 0, 0)
  plane.receiveShadow = true

  scene.add(plane)

  camera.position.x = 30
  camera.position.y = 40
  camera.position.z = 30
  camera.lookAt(scene.position)

  cube.rotation.x += 0.80
  cube.rotation.y += 0.80

  const spotLight = new THREE.SpotLight(0xFFFFFF)
  spotLight.position.set(-60, 40, -65)
  spotLight.castShadow = true
  spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
  spotLight.shadow.camera.far = 130
  spotLight.shadow.camera.near = 40

  // If you want a more detailled shadow you can increase the
  // mapSize used to draw the shadows.
  // spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  scene.add(spotLight)

  const ambienLight = new THREE.AmbientLight(0xcccccc)
  scene.add(ambienLight)

  render.render(scene, camera)

  return { camera, scene, render }
}

export {
  createCourse04
}
